<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Manager</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 20px;
        }
        .container {
            max-width: 600px;
        }
        .download-button {
            margin-left: 10px;
        }
        #uploadMessage {
            margin-top: 10px;
            font-size: 1.2em;
        }
        .file-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #searchInput {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>File Manager</h1>

        <h2>Upload File</h2>
        <form id="uploadForm" enctype="multipart/form-data">
            <div class="form-group">
                <input type="file" name="file" id="fileInput" class="form-control-file">
            </div>
            <button type="submit" class="btn btn-primary">Upload</button>
        </form>
        <p id="uploadMessage"></p>

        <h2 class="mt-4">Files</h2>
        <input type="text" id="searchInput" class="form-control" placeholder="Search files...">
        <ul id="fileList" class="list-group">
        {% for file in files %}
            <li class="list-group-item file-item">
                {{ file }}
                <a href="/download?filename={{ file }}" class="btn btn-info btn-sm download-button" download>Download</a>
            </li>
        {% endfor %}
        </ul>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="uploadSuccessModal" tabindex="-1" role="dialog" aria-labelledby="uploadSuccessModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadSuccessModalLabel">Upload Success</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    File uploaded successfully!
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
    function refreshFileList() {
        fetch('/')
        .then(response => response.text())
        .then(data => {
            document.body.innerHTML = data;
            attachSearchEvent(); // 重新附加搜索事件
        });
    }

    function attachSearchEvent() {
        var searchInput = document.getElementById('searchInput');
        searchInput.addEventListener('input', function() {
            var query = searchInput.value.toLowerCase();
            var fileItems = document.querySelectorAll('#fileList .file-item');
            fileItems.forEach(function(item) {
                var fileName = item.textContent.toLowerCase();
                if (fileName.includes(query)) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    }

    document.getElementById('uploadForm').addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        var formData = new FormData(this);

        fetch('/upload', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            var uploadMessage = document.getElementById('uploadMessage');
            if (data.success) {
                // 使用 Bootstrap 模态框显示上传成功
                $('#uploadSuccessModal').modal('show');
                document.getElementById('fileInput').value = ''; // 清空文件输入框
                refreshFileList(); // 刷新文件列表
            } else {
                uploadMessage.innerText = 'Upload failed: ' + data.error;
                uploadMessage.style.color = 'red';
            }
        })
        .catch(error => {
            document.getElementById('uploadMessage').innerText = 'Upload failed: ' + error;
            document.getElementById('uploadMessage').style.color = 'red';
        });
    });

    // 初始化搜索事件
    attachSearchEvent();
    </script>
</body>
</html>
